<template>
<view>
	<!-- 金额输入框 -->
	<view class="moneyBox">
		<input type="text" :value="rmb" :placeholder-class="info.costType" placeholder="0.00" @click="getNewData()"/>
	</view>
	
	<!-- 列表	 -->
	<view class="infoList">
		<!-- 左边 标题 -->
		<view class="infoLeft">
			<text class="iconfont icon-fenlei income"></text>
			分类
		</view>
		<!-- 右边 内容 -->
		<view class="infoRight">{{info.imgTitle}}</view>
	</view>
	
	<picker mode="date" @click="changeDate()" :value="info.date" fields="day">
		<!-- 左边 内容 -->
		<view class="infoLeft">
			<text class="iconfont icon-rili pay"></text>
			 日期
		</view>
		<!-- 右边 内容 -->
		<view class="infoRight">
			{{info.time}}
		</view>
	</picker>
	
	<view class="infoList">
		<!-- 左边 内容 -->
		<view class="infoLeft">
			<text class="iconfont icon-jilu" style="color: #F9BE0A;">
				备注
			</text>
		</view>
		<!-- 右边 内容 -->
		<view class="infoRight">
			<input type="text" placeholder="备注" :value="info.commit" @click="getNewData()"/>
			{{info.date}}
		</view>
	</view>
	
	<view class="btnBox">
	  <view class="setBtn" bindtap="setMsgData">编辑</view>
	  <view class="deleteBtn" bindtap="deleteMsgData">删除</view>
	</view>

</view>
</template>

<script>
	export default{
		data(){
			return{
				// 初始数据
				info: {},
				// 新数据
				newInfo: {},
				// 数据的初始日期
				time: "",
				// 数据的初始金额
				rmb: "",
			}
		},
		onLoad:function(option) {
			this.getdata(option.id);
			console.log('info-------------',this.info)
		},

		methods:{
			getdata(e){	
				console.log("id=>",e);
				uni.request({
					url:'http://175.178.80.92/index.php/index/record/change',
					data:{
						sendid:e,
					},
					header:{
						'content-type':'application/x-www-form-urlencoded'
					},
					method:'POST',
					success:(res)=>{
						console.log(res.data);
						this.info = res.data
					},
					fail:function(res){
						console.log(res)
					}
				})
			},
			changeDate:function(e)
			{
				console.log(e);
				this.info.date=e.target.value
			}
			
		}
	}
</script>

<style>
	.moneyBox{
	  padding: 20rpx;
	  
	}
	.moneyBox input{
	  font-size: 100rpx;
	  height: 100rpx;
	}
	
	/* 列表样式 */
	.infoList{
	  display: flex;
	  margin: 0 20rpx;
	  padding: 40rpx 0;
	  border-bottom: 1px solid #e6e6e6;
	  font-size: 32rpx;
	}
	.infoList .infoLeft{
	  width: 140rpx;
	  color: #999;
	}
	.infoList .infoRight{
	  width: calc(100% - 140rpx);
	}
	/* 按钮样式 */
	.btnBox{
	  width: 100%;
	  position: fixed;
	  bottom: 20rpx;
	  display: flex;
	  font-size: 32rpx;
	  /* 设置子元素的两侧间距相同 */
	  justify-content: space-around;
	}
	.btnBox .setBtn{
	  width: 50%;
	  height: 80rpx;
	  background-color: #28B298;
	  color: #fff;
	  line-height: 80rpx;
	  text-align: center;
	}
	.btnBox .deleteBtn{
	  width: 30%;
	  height: 76rpx;
	  border: 2rpx solid #cdcdcd;
	  text-align:  center;
	  line-height: 76rpx;
	  color: #e4393c;
	}
</style>
